﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="DIVDisplay">
    </div>
    <div id="DIV1">
        
        <ul>
            <li>liA</li>
            <li>liB</li>
        </ul>
        <button id="btnChangeLiValue">
            映射选定的数据集</button>
            <button id="btnChangeArray">
            映射选定的数据集</button>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnChangeLiValue").click(function () {
                var items = $("ul li", "#DIV1");
                /*1.此句演示对选定的数据集进行映射*/
                items.map(function () {
                    return $(this).text(":MAPED");
                });
                /*2.此句演示经过映射后的数据集内容已经被改变*/
                items.each(function () {
                    $("#DIVDisplay").append($(this).text() + "<br/>");
                });
            });

            $("#btnChangeArray").click(function () {
                var myArray = ["aa", "bb"];
                var items = $(myArray);
                /*1.此句演示对选定数组进行映射*/
                items.map(function () {
                    return this + "maped";

                });
                /*2.此句演示经过映射后的数组内容已经被改变*/
                items.each(function () {
                    $("#DIVDisplay").append(this + "<br/>");
                });
            });
        });
    </script>
</body>
</html>
